<div class="mb-3">
  <button class="btn btn-sm btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#queryWindow" aria-expanded="true" aria-controls="queryWindow">
    {{ t('Query window') }}
  </button>
</div>
<div class="collapse show mb-3" id="queryWindow">
  <form action="">
    <input type="hidden" id="db_name" value="{{ db }}">

    <div class="card">
      <div class="card-body">
        {% for table in tables %}
          <div class="d-none" id="{{ table.hash }}">
            <option value="*">*</option>
            {% for column in table.columns %}
              <option value="{{ column }}">{{ column }}</option>
            {% endfor %}
          </div>
        {% endfor %}

        <div class="row g-3 mb-3">
          {% for id in 0..default_no_of_columns %}
            <div class="col{{ id == 0 ? ' d-none' }}"{{ id == 0 ? ' id="new_column_layout"' }}>
              <div class="card">
                <fieldset class="card-body">
                  <select class="tableNameSelect">
                    <option value="">{{ t('select table') }}</option>
                    {% for keyTableName, table in tables %}
                      <option data-hash="{{ table.hash }}" value="{{ keyTableName }}">{{ keyTableName }}</option>
                    {% endfor %}
                  </select>
                  <span>.</span>
                  <select class="columnNameSelect">
                    <option value="">{{ t('select column') }}</option>
                  </select>
                  <br>
                  <input type="checkbox" checked class="show_col">
                  <span>{{ t('Show') }}</span>
                  <br>
                  <input type="text" placeholder="{{ t('Table alias') }}" class="table_alias">
                  <input type="text" placeholder="{{ t('Column alias') }}" class="col_alias">
                  <br>
                  <input type="checkbox"
                         title="{{ t('Use this column in criteria') }}"
                         class="criteria_col" data-bs-toggle="collapse" data-bs-target="#criteriaOptions{{ id }}" aria-expanded="false" aria-controls="criteriaOptions{{ id }}">

                  <button class="btn btn-link p-0 jsCriteriaButton" type="button" data-bs-toggle="collapse" data-bs-target="#criteriaOptions{{ id }}" aria-expanded="false" aria-controls="criteriaOptions{{ id }}">
                    {{ t('criteria') }}
                  </button>
                  <div class="collapse jsCriteriaOptions" id="criteriaOptions{{ id }}">

                    <div>
                      <table class="table table-sm table-borderless align-middle w-auto">

                        <tr class="sort_order">
                          <td>{{ t('Sort') }}</td>
                          <td><input type="radio" name="sort[{{ id }}]">{{ t('Ascending') }}</td>
                          <td><input type="radio" name="sort[{{ id }}]">{{ t('Descending') }}</td>
                        </tr>

                        <tr class="logical_operator">
                          <td>{{ t('Add as') }}</td>
                          <td>
                            <input type="radio"
                                   name="logical_op[{{ id }}]"
                                   value="AND"
                                   class="logical_op"
                                   checked>
                            AND
                          </td>
                          <td>
                            <input type="radio"
                                   name="logical_op[{{ id }}]"
                                   value="OR"
                                   class="logical_op">
                            OR
                          </td>
                        </tr>

                        <tr>
                          <td>Column</td>
                          <td colspan="2">
                            <select class="columnNameSelect query-form__select--inline opColumn">
                              <option value="">{{ t('select column') }}</option>
                            </select>
                          </td>
                        </tr>

                        <tr>
                          <td>Op</td>
                          <td>
                            <select class="criteria_op">
                              <option value="=">=</option>
                              <option value=">">&gt;</option>
                              <option value=">=">&gt;=</option>
                              <option value="<">&lt;</option>
                              <option value="<=">&lt;=</option>
                              <option value="!=">!=</option>
                              <option value="LIKE">LIKE</option>
                              <option value="LIKE %...%">LIKE %...%</option>
                              <option value="NOT LIKE">NOT LIKE</option>
                              <option value="NOT LIKE %...%">NOT LIKE %...%</option>
                              <option value="IN (...)">IN (...)</option>
                              <option value="NOT IN (...)">NOT IN (...)</option>
                              <option value="BETWEEN">BETWEEN</option>
                              <option value="NOT BETWEEN">NOT BETWEEN</option>
                              <option value="IS NULL">IS NULL</option>
                              <option value="IS NOT NULL">IS NOT NULL</option>
                              <option value="REGEXP">REGEXP</option>
                              <option value="REGEXP ^...$">REGEXP ^...$</option>
                              <option value="NOT REGEXP">NOT REGEXP</option>
                            </select>
                          </td>
                          <td>
                            <select class="criteria_rhs">
                              <option value="text">{{ t('Text') }}</option>
                              <option value="anotherColumn">{{ t('Another column') }}</option>
                            </select>
                          </td>
                        </tr>

                        <tr class="rhs_table" style="display: none;">
                          <td></td>
                          <td>
                            <select class="tableNameSelect">
                              <option value="">{{ t('select table') }}</option>
                              {% for keyTableName, table in tables %}
                                <option data-hash="{{ table.hash }}" value="{{ keyTableName }}">{{ keyTableName }}</option>
                              {% endfor %}
                            </select><span>.</span>
                          </td>
                          <td>
                            <select class="columnNameSelect">
                              <option value="">{{ t('select column') }}</option>
                            </select>
                          </td>
                        </tr>

                        <tr class="rhs_text">
                          <td></td>
                          <td colspan="2">
                            <input type="text"
                                   class="rhs_text_val"
                                   placeholder="{{ t('Enter criteria as free text') }}">
                          </td>
                        </tr>

                      </table>
                    </div>
                  </div>
                  <button type="button" class="btn-close position-absolute top-0 end-0 jsRemoveColumn" aria-label="{{ t('Remove this column') }}"></button>
                </fieldset>
              </div>
            </div>
          {% endfor %}
        </div>

        <div class="mb-3">
          <input class="btn btn-secondary" type="button" value="{{ t('+ Add column') }}" id="add_column_button">
        </div>

        <div>
          {# Keep the block without a space between the open and close tag #}
          <textarea id="MultiSqlquery"
                    class="form-control"
                    cols="80"
                    rows="4"
                    name="sql_query"
                    dir="ltr"></textarea>
        </div>
      </div>

      <div class="card-footer">
        <input class="btn btn-secondary" type="button" id="update_query_button" value="{{ t('Update query') }}">
        <input class="btn btn-secondary" type="button" id="copy_query" value="{{ t('Copy query') }}" disabled>
        <input class="btn btn-primary" type="button" id="submit_query" value="{{ t('Submit query') }}">
      </div>
    </div>
  </form>
</div>
<div id="sql_results"></div>
